<template>
  <el-container class="all">
    <div class="topbar">
      <div class="nav">
        <label for="" class="el-icon-location-information Positioning">
          {{ Positioning }}
        </label>
        <ul>
          <li style="margin-right: 10px; width: 44px; float: right;">
            <el-dropdown placement="bottom" trigger="click">
              <span class="el-dropdown-link">
                Zora
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>设置</el-dropdown-item>
                <el-dropdown-item>注销</el-dropdown-item>
                <el-dropdown-item>帮助</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
          <li style="margin-right: 0px; width: 44px; float: right;">
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
          </li>
          <li @click="toOrder">
            <a href="/order" class="">
              <i class="el-icon-document-checked"></i>
              我的订单
            </a>
          </li>
          <li @click="tocollect">
            <a href="/collect" class="">
              <i class="el-icon-star-off"></i>
              我的收藏
            </a>
          </li>
          <li @click="toShoppingCart">
            <a href="/shoppingCart" class="">
              <i class="el-icon-shopping-cart-full"></i>
              购物车
            </a>
          </li>
        </ul>
      </div>
      <div class="suc">
        <i class="iconfont icon-queren"></i>
        <span v-if="orderNum">订单提交成功,请尽快支付！订单号:{{ num }}</span>
        <span v-else>订单号:{{ num }}</span>
        <span class="num">应付金额:{{ money }}元</span>
      </div>
      <div>
        <span class="mode">支付方式</span>
        <div>
          <el-row v-for="(date, index) in tableData" :key="index" @click="id">
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
              :max="1"
            >
              <el-checkbox :label="date" :key="date.b">
                <span>
                  <i :class="date.class"></i>
                  <label>{{ date.date }}</label>
                </span>
              </el-checkbox>
            </el-checkbox-group>
          </el-row>
        </div>
        <el-button class="pay" type="danger" @click="dialogVisible = true">
          立即支付
        </el-button>
      </div>
    </div>

    <!-- 支付模态框 -->
    <el-dialog :visible.sync="dialogVisible" width="25%">
      <el-image :src="url"></el-image>
    </el-dialog>
  </el-container>
</template>

<script>
const cityOptions = [
  { class: 'iconfont icon-weixinzhifu', date: '微信支付' },
  {
    class: 'iconfont icon-zhifubaozhifu',
    date: '支付宝支付',
  },
  {
    class: 'iconfont icon-yinhangqiazhifu',
    date: '银行卡支付',
  },
  {
    class: 'iconfont icon-yinxingqiazhifu',
    date: '信用卡支付',
  },
]
export default {
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      tableData: cityOptions,
      orderNum: true,
      Positioning: '',
      checked: false,
      dialogVisible: false,
      url:
        'https://www.chitus.com/ewm/create?config=%7B%22content%22%3A%22http%3A%2F%2Fhyhzora.com%22%7D',
      num: 0,
      money: 0,
    }
  },
  methods: {
    handleCheckAllChange(val) {
      console.log(val)
      this.checkedCities = val ? cityOptions : []
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.tableData.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.tableData.length
    },
    toShoppingCart: function () {
      this.$router.push('shoppingCart')
    },
    toOrder() {
      this.$router.push('order')
    },
    tocollect() {
      this.$router.push('collect')
    },
  },
  mounted() {
    var data = {
      key: 'EDDBZ-BYXL3-WSF3C-3RWXI-NCV46-ZEBZ4', //这个key就是你申请的密钥
    }
    var url = 'https://apis.map.qq.com/ws/location/v1/ip' //这个就是地理位置信息的接口
    data.output = 'jsonp'
    this.$jsonp(url, data)
      .then((res) => {
        this.Positioning = res.result.ad_info.city
      })
      .catch((error) => {
        console.log(error)
      })
    var num = this.$route.query.num
    var money = this.$route.query.money
    if (num && money) {
      this.orderNum = false
      this.num = num
      this.money = money
    } else {
      this.num = Math.floor(Math.random() * 1000000000000)
      this.money = money
    }
  },
}
</script>

<style>
* {
  margin: 0;
  border: none;
  list-style: none;
}
.Positioning {
  line-height: 40px;
  color: #b0b0b0 !important;
  font-size: 15px;
  margin-left: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #b0b0b0 !important;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
a,
a:hover {
  text-decoration: none;
}

.topbar {
  width: 100vw;
  height: 40px;
  background-color: #3d3d3d;
  margin-bottom: 20px;
}
.topbar .nav {
  margin: 0 auto;
}
.topbar .nav ul {
  float: right;
}
.topbar .nav li {
  float: left;
  height: 40px;
  color: #b0b0b0;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  margin-right: 10px;
}

.topbar .nav .sep {
  color: #b0b0b0;
  font-size: 12px;
  margin: 0 5px;
}
.topbar .nav li .el-button {
  color: #b0b0b0;
}
.topbar .nav .el-button:hover {
  color: #fff;
}
.topbar .nav li a {
  color: #b0b0b0;
}
.topbar .nav a:hover {
  color: #fff;
}
.topbar .nav li {
  width: 80px;
}
.topbar .nav li:hover {
  background: #b0b0b010;
}

.suc {
  font-size: 22px;
  margin-top: 10px;
  border-bottom: 1px solid black;
}
.suc i {
  margin-right: 5px;
  margin-left: 20px;
}
.iconfont {
  font-size: 25px;
  color: rgb(0, 204, 0);
}
.num {
  float: right;
  margin-right: 20px;
}
.mode {
  padding-top: 50px !important;
  margin-right: 5px;
  margin-left: 20px;
  font-size: 50px;
}
.el-row {
  margin-left: 30%;
  margin-top: 20px;
  height: 40px;
  width: 40%;
  border: 1px solid rgb(228, 228, 228) !important;
  background-color: rgb(228, 228, 228);
}
.el-row .el-checkbox__label {
  font-size: 20px;
  color: black;
  padding-left: 80%;
  line-height: 35px;
}
.icon-weixinzhifu {
  color: rgb(18, 221, 18);
  margin-left: 11px;
}
.icon-zhifubaozhifu {
  color: rgb(52, 115, 225);
}
.icon-yinhangqiazhifu {
  color: rgb(145, 132, 132);
}
.pay {
  float: right;
  margin-top: 5%;
  margin-right: 5%;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: black;
}
</style>
